<template>
  <div>
    <transition name="el-fade-in-linear">
      <div class="box" v-show="show">cccc</div>
    </transition>
    <transition name="el-fade-in-linear">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column label="Date" width="180">
          <template #default="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px">{{ scope.row.date }}</span>
          </template>
        </el-table-column>
        <el-table-column label="Name" width="180">
          <template #default="scope">
            <el-popover effect="light" trigger="hover" placement="top">
              <template #default>
                <p>姓名: {{ scope.row.name }}</p>
                <p>住址: {{ scope.row.address }}</p>
              </template>
              <template #reference>
                <div class="name-wrapper">
                  <el-tag size="medium">{{ scope.row.name }}</el-tag>
                </div>
              </template>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="Operations">
          <template #default="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
              >Edit</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >Delete</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </transition>
    <div style="padding: 10px">
      <el-button @click="text">登陆测试</el-button>
    </div>
  </div>
</template>

<script>
import request from "../utils/request";
export default {
  data() {
    return {
      x: 99,
      show: true,
      tableData: [
        {
          date: "2016-05-03",
          name: "Tom",
          address: "No. 189, Grove St, Los Angeles",
        },
        {
          date: "2016-05-02",
          name: "Tom",
          address: "No. 189, Grove St, Los Angeles",
        },
        {
          date: "2016-05-04",
          name: "Tom",
          address: "No. 189, Grove St, Los Angeles",
        },
        {
          date: "2016-05-01",
          name: "Tom",
          address: "No. 189, Grove St, Los Angeles",
        },
      ],
    };
  },
  methods: {
    text() {
      request.get("/api/goods/change-username").then((res) => {
        console.log(res);
        console.log(0.1 + 0.2);
        console.log(this);
      });
      this.show = !this.show;
    },
    handleDelete(index, row) {
      console.log(index, row);
      this.tableData.splice(index, 1);
    },
  },
};
</script>

<style>
.box {
  display: inline-block;
  width: 200px;
  height: 200px;
  background-color: skyblue;
  margin-top: 20px;
  color: #fff;
  text-align: center;
  line-height: 200px;
  margin-right: 20px;
}
</style>